<template>
  <div class="title-container">
    <span class="line"></span>
    <slot name="content">
      <p class="title">
        <slot name="title">
          <span>{{ title }}</span>
        </slot>
      </p>

      <slot name="small"></slot>
    </slot>
  </div>
</template>

<script lang="ts" setup>
  const props = defineProps({
    title: {
      type: String,
    },
  })
</script>

<style lang="less" scoped>
  .title-container {
    @text-color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .title {
      color: var(--color-text-2);
      font-size: 15px;
      vertical-align: middle;
    }
    .line {
      display: inline-block;
      background-color: rgb(var(--primary-6));
      margin-right: 10px;
      width: 4px;
      height: 16px;
      border-radius: 4px;
    }
  }
</style>
